<template>
  <div class="header">
    <ul class="nav">
      <li>
        <nuxt-link to="#">
          首页
        </nuxt-link>
      </li>
      <li class="buyer" @mouseover="buyeractive=true" @mouseleave="buyeractive=false">
        买家入口
        <i class="el-icon-arrow-down" />
        <div v-if="buyeractive" class="list">
          <ul>
            <li>
              <nuxt-link to="#">
                高档家具
              </nuxt-link>
            </li>
            <li>
              <nuxt-link to="#">
                潮流衣裤
              </nuxt-link>
            </li>
            <li>
              <nuxt-link to="#">
                数码科技
              </nuxt-link>
            </li>
            <li>
              <nuxt-link to="#">
                母婴用品
              </nuxt-link>
            </li>
          </ul>
        </div>
      </li>
      <li class="buyer" @mouseover="shopsactive=true" @mouseleave="shopsactive=false">
        商家入口
        <i class="el-icon-arrow-down" />
        <div v-if="shopsactive" class="list">
          <ul>
            <li>
              <nuxt-link to="#">
                我要入驻
              </nuxt-link>
            </li>
            <li>
              <nuxt-link to="#">
                售后保障
              </nuxt-link>
            </li>
            <li>
              <nuxt-link to="/addGoods">
                发布商品
              </nuxt-link>
            </li>
            <li>
              <nuxt-link to="#">
                批量订购
              </nuxt-link>
            </li>
          </ul>
        </div>
      </li>
      <li><span>帮助</span></li>
      <li class="register">
        <nuxt-link to="/register">
          注册
        </nuxt-link>
      </li>
      <li class="login">
        <span v-if="username">
          欢迎您&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <nuxt-link v-if="!username" to="/login">
          hi~请登录
        </nuxt-link>
        <nuxt-link v-else class="exit" to="shopcart">
          {{ username }}
          &nbsp;&nbsp;
          <i class="el-icon-shopping-cart-full"></i>
        </nuxt-link>
        <nuxt-link v-if="username" to="/exit" class="exit">
          &nbsp;&nbsp;&nbsp;&nbsp;注销
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      buyeractive: false,
      shopsactive: false,
      username: ''
    }
  },
  mounted () {
    this.$axios.get('/users/getUser').then(({ status, data }) => {
      if (status === 200 && data) {
        this.username = data.username
      } else {
        this.username = ''
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.header
  background #fff
  opacity .9
  .nav
    a
      color #000
      &:hover
        color #e74c3c
    margin 0 auto
    line-height 45px
    .login
      &:hover
        color #000
        cursor default
      a
        color #c0392b
        &:hover
          color #e74c3c
      .exit
        color #000
    li
      display inline-block
      cursor pointer
      margin-right 25px
      &:hover
        color #e67e22
    .buyer
      position relative
      z-index 9999
      .list
        position absolute
        top 40px
        left 0
        z-index 99999
        ul
          padding 0
          background #fff
          li
            display block
            margin 0
            a
              color #e67e22
    .login,.register
      float right
      padding-right 50px
</style>
